<template>
  <div class="">
        <el-form  :model="formInline" label-width="135px" class="demo-form-inline">
            <el-form-item label="产品编号" class="is-required">
                <el-input  class="w174" v-model="formInline.productNumber"></el-input>
            </el-form-item>
            <!-- <el-form-item  label="上架时间">
                <el-date-picker class="w174" v-model="formInline.createTime" type="date" > </el-date-picker>
            </el-form-item> -->
            <el-form-item label="产品一级标签" class="is-required">
                <el-select class="w270"  v-model="formInline.firstParentId" @change="getLevelTwo">
                    <el-option v-for="(item,j) in levelOne" :label="item.name" :value="item.id"></el-option>
                    <!-- <el-option label="区域二" value="beijing"></el-option> -->
                </el-select>
            </el-form-item>
            <el-form-item label="产品二级标签" class="is-required">
                <el-select class="w270"  v-model="formInline.parentId">
                    <el-option v-for="(item,j) in levelTwo" :label="item.name" :value="item.id"></el-option>
                    <!-- <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option> -->
                </el-select>
            </el-form-item>
            <div></div>
            <el-form-item label="产品资质图片" class="is-required">
                <ul class="imglist">
                    <li v-for="(item,j) in zzList">
                        <img :src="httpImgUrl+item">
                        <p @click="del('zzList',j)">删除</p>
                    </li>
                    <li @click="model='zzList'">
                        <el-upload :show-file-list="false" :on-success="uploadSuccess" class="upload" :action="httpApi+'uploadfile/uploadFile'">
                            <i class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </li>
                </ul>
            </el-form-item>
            <div></div>
            <el-form-item label="产品主要展示图片" class="is-required">
                <ul class="imglist">
                    <li @click="model='mainImg'">
                        <el-upload :show-file-list="false" :on-success="uploadSuccess" class="upload" :action="httpApi+'uploadfile/uploadFile'">
                            <img v-if="mainImg" :src="httpImgUrl+mainImg">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </li>
                </ul>
            </el-form-item>
            <div></div>
            <el-form-item label="产品次要图片列表" class="is-required">
                <ul class="imglist">
                    <li v-for="(item,j) in productImgList">
                        <img :src="httpImgUrl+item">
                        <p @click="del('productImgList',j)">删除</p>
                    </li>
                    <li @click="model='productImgList'">
                        <el-upload :show-file-list="false" :on-success="uploadSuccess" class="upload" :action="httpApi+'uploadfile/uploadFile'">
                            <i class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </li>
                </ul>
            </el-form-item>
            <el-form-item label="产品详情" class="is-required">
                <quill-editor v-model="formInline.productDiscription" ref="myQuillEditor" class="editer"
                        :options="{}">
                </quill-editor>
            </el-form-item>
            <el-form-item label="产品详情英文" class="is-required">
                <quill-editor v-model="formInline.productDiscriptionEn" ref="myQuillEditor" class="editer"
                        :options="{}">
                </quill-editor>
            </el-form-item>
            <el-form-item label="产品特点" class="is-required">
                <quill-editor v-model="formInline.productContent" ref="myQuillEditor" class="editer"
                        :options="{}" >
                </quill-editor>
            </el-form-item>
            <el-form-item label="产品特点英文" class="is-required">
                <quill-editor v-model="formInline.productContentEn" ref="myQuillEditor" class="editer"
                        :options="{}" >
                </quill-editor>
            </el-form-item>
            <el-form-item label="正常使用条件" class="is-required">
                <quill-editor v-model="formInline.productUseConditions" ref="myQuillEditor" class="editer"
                        :options="{}" >
                </quill-editor>
            </el-form-item>
            <el-form-item label="正常使用条件英文" class="is-required">
                <quill-editor v-model="formInline.productUseConditionsEn" ref="myQuillEditor" class="editer"
                        :options="{}" >
                </quill-editor>
            </el-form-item>
            <el-form-item label="订单须知" class="is-required">
                <quill-editor v-model="formInline.orderingInstructions" ref="myQuillEditor" class="editer"
                        :options="{}" >
                </quill-editor>
            </el-form-item>
            <el-form-item label="订单须知英文" class="is-required">
                <quill-editor v-model="formInline.orderingInstructionsEn" ref="myQuillEditor" class="editer"
                        :options="{}" >
                </quill-editor>
            </el-form-item>
            <el-form-item label="技术参数" class="is-required">
                <quill-editor v-model="formInline.technicalParameters" ref="myQuillEditor" class="editer"
                        :options="{}">
                </quill-editor>
            </el-form-item>
            <el-form-item label="技术参数英文" class="is-required">
                <quill-editor v-model="formInline.technicalParametersEn" ref="myQuillEditor" class="editer"
                        :options="{}">
                </quill-editor>
            </el-form-item>
            <el-form-item label="标准" class="is-required">
                <quill-editor v-model="formInline.productStandard" ref="myQuillEditor" class="editer"
                        :options="{}" >
                </quill-editor>
            </el-form-item>
            <el-form-item label="标准英文" class="is-required">
                <quill-editor v-model="formInline.productStandardEn" ref="myQuillEditor" class="editer"
                        :options="{}" >
                </quill-editor>
            </el-form-item>
        </el-form>
        <el-button type="primary w200 mrauto mt20" round @click="save">保存</el-button>
  </div>
</template>

<script>
// import ueditor from './ue.vue' //调用编辑器
export default {
  name: 'HelloWorld',
  data () {
    return {
      editorOption: {},
      zzList:[],
      levelOne:[],
      levelTwo:[],
      formInline:{
          parentId:'',
          firstParentId:'',
          productNumber:'',
          productContent:'',
          productContentEn:'',
          productDiscription:'',
          productDiscriptionEn:'',
          productStandard:'',
          productStandardEn:'',
          productUseConditions:'',
          productUseConditionsEn:'',
          technicalParameters:'',
          technicalParametersEn:'',
          orderingInstructions:'',
          orderingInstructionsEn:''
      },
      model:'zzList',
      mainImg:'',
      productImgList:[]
    }
  },
  methods:{
      save(){
          var param={};
          var flag=true;
          for(var j in this.formInline){
              param[j]=this.formInline[j];
              if(param[j]==''){
                  flag=false;
              }
          }
          if(param.mainPicture==''||this.zzList.length<=0||this.productImgList.length<=0){
              flag=false;
          }
          if(flag){
                param.mainPicture=this.mainImg;
                param.productAptitude=this.zzList.join(',');
                param.attachPictures=this.productImgList.join(',');
                var url='blProduct/save';
                console.log(param.id)
                if(param.id){
                    url='blProduct/update';
                }
                this.$http.post(this.$store.state.httpApi + url,param).then(response =>{
                    if(response.status == 200){
                        if(response.data.success){
                            this.$message({
                                message: '保存成功',
                                type: 'success'
                            });
                            this.$router.go(-1)
                        }else{
                            this.$message.error(response.data.error);
                        }       
                    }
                    },response => {
                        console.log('请求失败',response)
                })
          }else{
              this.$message.error('您还有必填项还没有填！');
          }
         
          
      },
      uploadSuccess(file){
          if(this.model=='mainImg'){
              this[this.model]=file.data[0];
          }else{
              this[this.model].push(file.data[0])
          }
      },
      del(value,j){
          this[value].splice(j,1);
      },
    //   获取一级标签
      getRows(){
          this.$http.get(this.$store.state.httpApi + 'productFirstDirectory/all').then(response =>{
          if(response.status == 200){
                if(response.data.success){
                    this.levelOne=response.data.data;
                }       
          }else{
            console.log('接口返回失败!',response);
          }
          },response => {
            console.log('请求失败',response)
          })
      },
      //   获取二级标签
      getLevelTwo(value,parentId){
          this.$http.get(this.$store.state.httpApi + 'productSecondDirectory/all?parentId='+value).then(response =>{
            if(response.status == 200){
                if(response.data.success){  
                    this.levelTwo=response.data.data;
                    if(parentId){
                        this.formInline.parentId=parentId;
                    }else{
                        this.formInline.parentId='';
                    }
                    
                }       
            }else{
                console.log('接口返回失败!',response);
            }
            },response => {
                console.log('请求失败',response)
          })
      },
    //   获取产品详情
      getDetail(id){
            this.$http.get(this.$store.state.httpApi + 'blProduct/getOne?id='+id).then(response =>{
                if(response.status == 200){
                    if(response.data.success){ 
                        this.getLevelTwo(response.data.data.firstParentId,response.data.data.parentId);
                        for(var j in this.formInline){
                            if(response.data.data[j]){
                                this.formInline[j]=response.data.data[j];
                            }
                        }
                        this.mainImg=response.data.data.mainPicture;
                        this.zzList=response.data.data.productAptitude.split(',');
                        this.productImgList=response.data.data.attachPictures.split(',');
                        this.formInline.id=response.data.data.id;
                    }       
                }else{
                    console.log('接口返回失败!',response);
                }
                },response => {
                    console.log('请求失败',response)
          })
      }
  },
  created(){
      this.getRows();
      if(this.$route.query.id){
          this.getDetail(this.$route.query.id);
      }
  },
  computed: {
    httpApi(){
        return this.$store.state.httpApi
    },
    httpImgUrl(){
        return this.$store.state.httpImgUrl
    },
  },
  components: {
//使用编辑器
  }
}
</script>
<style>
    .upload .el-upload{
        display:block;
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .img{
        height:513px;
        width:917px;
        display:block;
        margin-bottom:20px;
    }
    .imglist{
        font-size:0;
    }
    .imglist li{
        width:100px;
        height:100px;
        display:inline-block;
        vertical-align: top;
        margin-right:10px;
        position:relative;
    }
    .imglist li img{
        width:100%;
        height:100%;
    }
    .imglist li p{
        position: absolute;
        background:rgba(255,0,0,0.6);
        color: #fff;
        text-align: center;
        bottom: 0;
        font-size: 14px;
        display: none;
        line-height: 30px;
        cursor: pointer;
        width:100%;
    }
    .imglist li:hover p{
        display: block;
    }
    .upload{
        width:100%;
        height: 100%;
        box-sizing: border-box;
        border:1px solid #D9D9D9;
        font-size: 54px;
        text-align: center;
        // line-height: 200px;
        color: #D2D2D2;
        line-height:100px;
    }
    .upload img{
        width:100%;
        height: 100%;
    }
    
</style>
